<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <a :class="{active:comName=='com1'}" @click="tab('com1')">首页</a>
      <a :class="{active:comName=='com2'}" @click="tab('com2')">我的</a>
      <a :class="{active:comName=='com3'}" @click="tab('com3')">关于</a>
      <transition mode="out-in">
        <component :is="comName">
          </component>
      </transition>
    </div>
    <template id="com1">
      <div style="width: 100vm;height: 50vh;background-color: lightcoral;">我是首页的内容</div>
    </template>
    <template id="com2">
      <div style="width: 100vm;height: 50vh;background-color: lightblue;">这是我的页面内容</div>
    </template>
    <template id="com3">
      <div style="width: 100vm;height: 50vh;background-color: greenyellow;">这是关于的页面</div>
    </template>
  </body>
  <script src="vue.js"></script>
  <script>
    var com1 = {
      template: '#com1'
    }
    var com2 = {
      template: '#com2'
    }
    var com3 = {
      template: '#com3'
    }
    var vm = new Vue({
      el: '#app',
      components: {
        com1,
        com2,
        com3
      },
      data: {
        show: 0,
        comName: 'com1'
      },
      methods: {
        tab(e) {
          this.comName = e;
        }
      }
    })
  </script>
  <style>
    .active{
      color: red;
    }
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }

    .v-enter-active,.v-leave-active{
      transition: all 0.5s ease-in;
    }
  </style>
</html>
